<template>
  <view class="bg-white sticky t-0 z-1">
    <view class="hair--b">
      <uni-search-bar
        :value="query.keyword"
        placeholder="请输入关键词搜索"
        radius="100"
        @cancel="cancel"
        @clear="clear"
        @confirm="search"
      />
    </view>
    <view v-if="showModel" class="flex hair--b">
      <view class="flex-1 flex-ca h-44">
        <view class="model-item" :class="query.model === 2 ? 'model-itemActive' : ''" @click="selectModel(2)">文档</view>
      </view>
      <view class="flex-1 flex-ca h-44">
        <view class="model-item" :class="query.model === 1 ? 'model-itemActive' : ''" @click="selectModel(1)">商品套餐</view>
      </view>
    </view>
    <view class="">
      <view class="relative tabs flex-ba hair--b">
        <view class="tab-item text-primary" @click="drawerVisible=!drawerVisible">推荐</view>
        <view class="tab-item" :class="query.sort === 2 ? 'text-primary' : ''" @click="selectSort(2)">热门</view>
        <view class="tab-item" :class="query.sort === 0 ? 'text-primary' : ''" @click="selectSort(0)">最新</view>
        <view class="tab-item" :class="query.sort === 1 ? 'text-primary' : ''" @click="selectSort(1)">相关</view>
          
        <view v-if="query.model=== 2" class="tab-item flex-a" @click="onShowFormat">
          <view class="" :class="query.format ? 'text-primary' : ''">格式</view>
          <view class="ml-2">
            <view v-if="showFormat" class="iconnote iconfont icon-triangleupfill" />
            <view v-else class="iconnote iconfont icon-triangledownfill" />
          </view>
        </view>
        <view v-else class="tab-item flex-a" @click="selectSort([4, 5].includes(query.sort) ? 5 : 4)">
          <view class="" :class="[4, 5].includes(query.sort) ? 'text-primary' : ''">价格</view>
          <view class="h-16 flex-vb ml-2">
            <view :class="query.sort === 4 ? 'text-primary' : ''" class="iconnote iconfont icon-triangleupfill" />
            <view :class="query.sort === 5 ? 'text-primary' : ''" class="iconnote iconfont icon-triangledownfill" />
          </view>
        </view>
        <uni-transition class="drawer" :mode-class="['fade']" :show="showFormat">
          <scroll-view style="height: 480rpx;" scroll-y>
            <view class="px-12">
              <view class="px-4 h-40 leading-40" :class="query.format === '' ? 'text-primary' : ''" @click="selectFormat('')">全部</view>
              <view v-for="item in formatList" :key="item.id" class="px-4 h-40 leading-40 hair--t" :class="query.format === item.name ? 'text-primary' : ''" @click="selectFormat(item.name)">
                {{ item.name }}
              </view>
            </view>
          </scroll-view>
        </uni-transition>
      </view>
        
      <view class="relative">
        <view class="hair--b">
          <scroll-view scroll-x>
            <view class="h-40 flex-a px-16">
              <view v-for="(item, i) in category" :key="item.id" class="item-cap cate-item pr-8" :class="cateIndex === i ? 'text-primary' : ''" @click="selectCateId(i, item.id)">
                <view class="mr-4">{{ item.title }}</view>
                <view class="iconfont" :class="downId === item.id ? 'icon-up' : 'icon-down'" @click.stop="selectDownId(item.id)" />
              </view>
            </view>
          </scroll-view>
        </view>
        <uni-transition class="drawer" :mode-class="['fade']" :show="!!downId">
          <scroll-view class="terms-scroll" scroll-y>
            <view class="terms">
              <view v-for="item in terms" :key="item.id" class="term-item">
                <view class="term-title">{{ item.title }}</view>
                <view class="flex flex-wrap mx--5">
                  <view v-for="v in item.children" :key="v.id" class="item-cap term-cell" :class="cateSelectId === v.id ? 'term-cellActive' : ''" @click="selectThird(v.id)">{{ v.title }}</view>
                </view>
              </view>
            </view>
          </scroll-view>
          <view class="flex py-12 px-16 hair--y">
            <button class="round flex-1 mr-10" type="primary" plain @click="cateCancel">取消</button>
            <button class="round flex-1" type="primary" @click="cateConfirm">确定</button>
          </view>
        </uni-transition>
      </view>
    </view>
    <uni-view v-show="!!downId" style="opacity: 1; position: fixed; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); " @click="onShade" />
  </view>
</template>
<script>
export default {
  props: {
    showModel: Boolean,
    query: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      category: [],
      cateIdsGroup: [],
      cateSelectId: 0,
      formatList: [],
      drawerVisible: false,
      downId: 0,
      showFormat: false
    }
  },
  computed: {
    cateIndex() {
      return this.cateIdsGroup.findIndex(v => v.includes(this.query.id))
    },
    terms() {
      return this.category?.[this.cateIndex]?.children ?? []
    }
  },
  async mounted() {
    this.getCateOpts()
	  const [err, res] = await this.$f.awaitTo(this.categoryReady)()
    if (!err) {
      this.category = res
      this.cateIdsGroup = this.getCateIdsGroup(res)
    }
  },
  methods: {
    updateQuery(e) {
      const obj = {} 
      for (let i in e) {
        if (e[i] !== this.query[i]) {
          obj[i] = e[i]
        }
      }
      if (JSON.stringify(obj) !== '{}') {
        this.$emit('update:query', { ...this.query, ...obj })
      }
    },
    selectModel(e) {
      const obj = {}
      obj.model = e
      if (e === 1) {
        obj.format = ''
      } else if ([4, 5].includes(this.query.sort)) {
        obj.sort = ''
      }
      this.updateQuery(obj)
    },
    cancel() {},
    clear() {
      this.updateQuery({ keyword: '' })
    },
    search(e) {
      this.updateQuery({ keyword: e.value })
    },
    selectSort(e) {
      this.downId = 0
      const sort = e === this.query.sort ? '' : e
      this.updateQuery({ sort })
    },
    selectCateId(i, id) {
      if (this.cateIndex === i) {
        this.updateQuery({ id: 0 })
      } else {
        this.downId = 0
        this.updateQuery({ id })
      }
      this.cateSelectId = 0
    },
    selectDownId(id) {
      const _id = this.downId === id ? 0 : id
      this.downId = _id
      if (_id && this.query.id !== _id) {
        this.updateQuery({ id: _id })
      }
    },
    cateCancel() {
      this.downId = 0
    },
    cateConfirm() {
      this.cateCancel()
      this.updateQuery({ id: this.cateSelectId })
    },
    onShade() {
      this.cateCancel()
    },
    selectThird(id) {
      this.cateSelectId = this.cateSelectId === id ? 0 : id
    },
    selectFormat(e) {
      this.updateQuery({ format: e })
      this.showFormat = false
    },
    onShowFormat() {
      this.showFormat = !this.showFormat
    },
    getCateOpts() {
      this.$f.get('api/cateOpts').then(res => {
        this.formatList = res.data.formatList
      })
    },
    // 把分类id和分类下children的id递归到同一组
    getCateIdsGroup(category = []) {
      const recFun = (_list = [], _ids = []) => {
        _list.forEach(v => {
          _ids.push(v.id)
          if (v.children?.length) {
            recFun(v.children, _ids)
          }
        })
        return _ids
      }
      return category.map(v => recFun(v.children, [v.id]))
    }
  }
}
</script>

<style lang="scss">
.tabs {
	height: 92rpx;
}
.tab-item {
	padding: 0 32rpx;
}
.item-cap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 26rpx;
	height: 52rpx;
	padding-left: 24rpx;
	padding-right: 24rpx;
	border-radius: 44rpx;
	background-color: #F5F7FB;
	&.pr-8 {
		padding-right: 16rpx;
	}
}
.cate-item {
	margin-right: 24rpx;
	.iconfont {
		font-size: 24rpx;
		height: 24rpx;
		line-height: 24rpx;
		padding: 10rpx 8rpx 8rpx;
	}
}
.terms-scroll {
	height: 480rpx;
}
.terms {
	padding: 24rpx 32rpx 0;
	.mx--5 {
		margin-left: -10rpx;
		margin-right: -10rpx;
	}
}
.term-item {
	margin-bottom: 24rpx;
}
.term-title {
	font-weight: bold;
	margin-bottom: 24rpx;
}
.term-cell {
	margin: 0 10rpx 24rpx;
	&.term-cellActive {
		color: #fff;
		background-color: $uni-primary;
	}
}
.drawer {
	position: absolute;
	width: 100%;
	top: 100%;
	left: 0;
	background-color: #fff;
	z-index: 100;
}
.h-44 {
	height: 88rpx;
}
.model-item {
	padding: 6rpx 0;
	font-size: 32rpx;
	line-height: 40rpx;
	box-sizing: border-box;
}
.model-itemActive {
	font-weight: bold;
	border-bottom: 6rpx solid $uni-primary;
}
.iconnote {
	height: 16rpx;
	line-height: 16rpx;
	font-size: 16rpx;
}
</style>

<style>
</style>
